<template>
  <div class="slider">
    <div class="slider-show">
      <transition-group tag="ul" name="image">
        <li v-for="img in imgArray" v-show="img.orderId===mark" :key="img.orderId">
          <a href="#"><img :src="img.url" /></a>
        </li>
      </transition-group>
    </div>
    <div class="slide-bar">
      <span v-for="(img,index) in imgArray" :key="index" @click="change(index)" :class="{ 'active':index===mark }"></span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data(){
    return {
      timer: null,
      mark: 0, 
      imgArray:[
        {url:'img/1.jpg', orderId:0},
        {url:'img/2.jpg', orderId:1},
        {url:'img/4.jpg', orderId:2},
        {url:'img/5.jpg', orderId:3},
      ]
    }
  },
  methods:{
    autoPlay(){
      this.mark++;
      if(this.mark === this.imgArray.length){
        this.mark = 0;
      }
    },
    change(index){
      this.mark = index;
      clearInterval(this.timer);
      this.timer = setInterval(this.autoPlay,2500);
    },
  },
  created(){
    this.timer = setInterval(this.autoPlay,2500);
  }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

li {
  position: absolute;
}
a {
  color: #42b983;
}
.active {
  backgroud: #333333;
}

  .slider {
    width: 1200px;
    height: 800px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
  }
  .slider-show {
    width: 1200px;
    height: 800px;
  }
  .slide-bar {
    position: absolute;
    width: 100%;
    bottom: 10px;
    margin: 0 auto;
    z-index: 10;
    text-align: center;
  }
  .slide-bar span {
    width: 25px;
    height: 10px;
    border: 1px solid;
    background: white;
    display: inline-block;
    margin-right: 10px;
  }
  .active {
    background: red !important;
  }

  .image-enter-active {
    transform: translateX(0);
    transition: all 1.0s ease;
    overflow: hidden;
  }
  .image-leave-active {
    transform: translateX(-100%);
    transition: all 1.0s ease;
    overflow: hidden;
  }
  .image-enter {
    transform: translateX(100%);
  }
  .image-leave {
    transform: translateX(0);
  }
</style>
